@mixin checkbox($color) {
  input{
    &:checked{
      & ~ i{
        background-color: $color;
        border-color:$color;
      }
			& ~ span{
				color:$color;
			}
			&:disabled{
				& ~ i{
					bdc:mix($color,$white);
					bgc:mix($color,$white);
				}
				& ~ span{
					color:mix($color,$white);
				}
			}
    }  
  }
	
}
.x-checkbox{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding:0 3px;
  span{
    color: #999;
    font-size: 13px;
  }
  input{
    position: absolute;
    opacity: 0;
    & ~ i{
      display: inline-block;
      width: 16px;
      height:16px;
      border:1px solid #ccc;
      vertical-align: -3px;
      border-radius:2px;
      mr:3px;
    }
    &:checked{
      & ~ i{
        border:1px solid $primary;
        bgc:$primary;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 5px;
          height: 11px;
          br:1px solid #fff;
          bb:1px solid #fff;
          transform: translate(-50%,-66%)  rotate(45deg);
        } 
      }
			& ~ span{
				color:$primary;
			}
			&:disabled{
				& ~ i{
					bdc:mix($primary,$white);
					bgc:mix($primary,$white);
				}
				& ~ span{
					color:mix($primary,$white);
				}
			}
    }
		&:disabled{
      & ~ i{
        bdc:mix(#999,$white);
      }
      & ~ span{
        color:mix(#999,$white);
      }
    }
  }
  
  &.primary{
    @include checkbox($primary)
  }
  &.success{
    @include checkbox($success)
  }
  &.warning{
    @include checkbox($warning)
  }
  &.danger{
    @include checkbox($danger)
  }
}